import {Component, ViewChild, OnInit, AfterViewInit} from "@angular/core";

const EL_KEY = '__el'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  @ViewChild('grid') grid: any

  title = 'app works!';

  items = [
    {id: 1, name: 'Misty'},
    {id: 2, name: 'Misty'}
  ]

  private inputRenderer(cell) {
    if (!cell[EL_KEY]) {
      cell.element.innerHTML = '';
      var input = document.createElement('input');
      cell.element.appendChild(input);
      cell[EL_KEY] = input
    }
    let el = cell[EL_KEY]
    el.value = cell.data ? cell.data : null;
  }

  ngAfterViewInit() {
    let _grid = this.grid.nativeElement

    _grid.then(() => {
      let colName = _grid.columns.find(col => col.name === 'name')
      colName.renderer = this.inputRenderer
    })
  }
}
